<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Flexbox指南 &middot; pfan</title>
        <meta name="description" content="Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
 基本介绍 浏览器兼容性 启用Flexbox 容器属性  行||列 对齐 ==row and columns== 水平||垂直 对齐 ==Vertical and horizontal== 更改水平对齐 ==change horizontal alignment== 更改垂直对齐 ==change vertical alignment==  关于基准线 ==about baseline==   换行 ==wrap==   flex元素上的属性  order align-self flex-grow flex-shrink flex-basis flex    介绍 Flexbox，也称为灵活盒模块，是两个现代布局系统之一，还有CSS Grid。与CSS Grid（二维）相比，flexbox是一维布局模型。它将基于行或列控制布局，但不能同时控制布局。flexbox的主要目标是允许项目填充其容器提供的整个空间，具体取决于您设置的一些规则。Flexbox不兼容IE10以下，IE10以下可以使用如下方式：
 Table layouts Floats clearfix hacks display: table hacks  兼容性 IE10以下不兼容，一些浏览器需要使用-webkit或者display:-webkit-box兼容处理。
使用flexbox display:flexbox 或者">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="generator" content="Hugo 0.73.0" />
        <meta name="robots" content="index,follow">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta property="og:title" content="Flexbox指南">
<meta property="og:description" content="Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
 基本介绍 浏览器兼容性 启用Flexbox 容器属性  行||列 对齐 ==row and columns== 水平||垂直 对齐 ==Vertical and horizontal== 更改水平对齐 ==change horizontal alignment== 更改垂直对齐 ==change vertical alignment==  关于基准线 ==about baseline==   换行 ==wrap==   flex元素上的属性  order align-self flex-grow flex-shrink flex-basis flex    介绍 Flexbox，也称为灵活盒模块，是两个现代布局系统之一，还有CSS Grid。与CSS Grid（二维）相比，flexbox是一维布局模型。它将基于行或列控制布局，但不能同时控制布局。flexbox的主要目标是允许项目填充其容器提供的整个空间，具体取决于您设置的一些规则。Flexbox不兼容IE10以下，IE10以下可以使用如下方式：
 Table layouts Floats clearfix hacks display: table hacks  兼容性 IE10以下不兼容，一些浏览器需要使用-webkit或者display:-webkit-box兼容处理。
使用flexbox display:flexbox 或者">
<meta property="og:type" content="article">
<meta property="og:url" content="https://blog.steps.info/2018/04/12/flexbox%E6%8C%87%E5%8D%97/">
        <link rel="stylesheet" href="https://blog.steps.info/dist/site.css">
        <link rel="stylesheet" href="https://blog.steps.info/dist/syntax.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300&subset=latin,cyrillic-ext,latin-ext,cyrillic">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        
        
        
        
    </head>
    <body>
        
<script type="application/javascript">
var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
var doNotTrack = (dnt == "1" || dnt == "yes");
if (!doNotTrack) {
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
	ga('create', 'XXX', 'auto');
	ga('set', 'anonymizeIp', true);
	ga('send', 'pageview');
}
</script>


        <div id="wrapper">
            <header class="site-header">
                <div class="container">
                    <div class="site-title-wrapper">
                        
                            <h1 class="site-title">
                                <a title="Homepage" href="https://blog.steps.info/">Homepage</a>
                            </h1>
                        
                        <a class="button-square" href="https://blog.steps.info/index.xml"><i class="fa fa-rss"></i></a>
                        
                            <a class="button-square button-social hint--top" data-hint="Twitter" title="Twitter" href="https://twitter.com/pangel3" rel="me">
                                <i class="fa fa-twitter"></i>
                            </a>
                        
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Gitlab" title="Gitlab" href="https://gitlab.com/funnypan" rel="me">
                                <i class="fa fa-gitlab"></i>
                            </a>
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Github" title="Github" href="https://github.com/RazzilDarkbrew" rel="me">
                                <i class="fa fa-github-alt"></i>
                            </a>
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Stack Overflow" title="Stack Overflow" href="https://stackoverflow.com/users/7784704/stepsinfo" rel="me">
                                <i class="fa fa-stack-overflow"></i>
                            </a>
                        
                        
                        
                            <a class="button-square button-social hint--top" data-hint="Email" title="Email" href="mailto:gemini0525@foxmail.com">
                                <i class="fa fa-envelope"></i>
                            </a>
                        
                    </div>

                    <ul class="site-nav">
                        
                    </ul>
                </div>
            </header>

            <div id="container">


<div class="container">
    <article class="post-container" itemscope="" itemtype="http://schema.org/BlogPosting">
        <header class="post-header">
    <h1 class="post-title" itemprop="name headline">Flexbox指南</h1>
    
    <p class="post-date">
        <span>Published <time datetime="2018-04-12" itemprop="datePublished">Thu, Apr 12, 2018</time></span>
        <span>by</span>
        <span itemscope="" itemprop="author" itemtype="https://schema.org/Person">
            <span itemprop="name">
                <a href="https://github.com/RazzilDarkbrew" itemprop="url" rel="author">pfan</a>
            </span>
        </span>
    </p>
    
        <p class="post-reading post-line">
            <span>Estimated reading time: 1 min</span>
        </p>
    
</header>

        <div class="post-content clearfix" itemprop="articleBody">
    

    <p><img src="https://cdn.jsdelivr.net/gh/funnypan/pics@master/20181016105026.png" alt="Flexbox"></p>
<p>Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。</p>
<ul>
<li>基本介绍</li>
<li>浏览器兼容性</li>
<li>启用Flexbox</li>
<li>容器属性
<ul>
<li>行||列 对齐 ==row and columns==</li>
<li>水平||垂直 对齐 ==Vertical and horizontal==</li>
<li>更改水平对齐 ==change horizontal alignment==</li>
<li>更改垂直对齐 ==change vertical alignment==
<ul>
<li>关于基准线 ==about baseline==</li>
</ul>
</li>
<li>换行 ==wrap==</li>
</ul>
</li>
<li>flex元素上的属性
<ul>
<li>order</li>
<li>align-self</li>
<li>flex-grow</li>
<li>flex-shrink</li>
<li>flex-basis</li>
<li>flex</li>
</ul>
</li>
</ul>
<h3 id="介绍">介绍</h3>
<p>Flexbox，也称为灵活盒模块，是两个现代布局系统之一，还有CSS Grid。与CSS Grid（二维）相比，flexbox是一维布局模型。它将基于行或列控制布局，但不能同时控制布局。flexbox的主要目标是允许项目填充其容器提供的整个空间，具体取决于您设置的一些规则。Flexbox不兼容IE10以下，IE10以下可以使用如下方式：</p>
<ul>
<li>Table layouts</li>
<li>Floats</li>
<li>clearfix hacks</li>
<li>display: table hacks</li>
</ul>
<h3 id="兼容性">兼容性</h3>
<p><img src="https://cdn.jsdelivr.net/gh/funnypan/pics@master/20181020205051.png" alt="image"></p>
<p>IE10以下不兼容，一些浏览器需要使用-webkit或者display:-webkit-box兼容处理。</p>
<h3 id="使用flexbox">使用flexbox</h3>
<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="nt">display</span><span class="p">:</span><span class="nd">flexbox</span>
</code></pre></div><p>或者</p>
<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="nt">display</span><span class="p">:</span><span class="nd">inline-flexbox</span>
</code></pre></div><h3 id="容器属性">容器属性</h3>
<ul>
<li>flex-direction</li>
<li>justify-content</li>
<li>align-items</li>
<li>flex-wrap</li>
<li>flex-flow</li>
</ul>
<h3 id="行对齐或者列对齐">行对齐或者列对齐</h3>
<p>flex-direction决定容器以行对齐还是列对齐。</p>
<ul>
<li>flex-direction:row，行对齐，从左到右</li>
<li>flex-direction:row-reverse，行对齐，从右到左</li>
<li>flex-direction:column，列对齐，从上到下</li>
<li>flex-direction:column-reverse，列对齐，从下到上</li>
</ul>
<p>如下图所示：</p>
<p><img src="https://cdn.jsdelivr.net/gh/funnypan/pics@master/20181020205713.png" alt="image"></p>
<h3 id="水平对齐或者垂直对齐">水平对齐或者垂直对齐</h3>
<p>flex-direction默认是row，从左向右，当其属性值为column时，是从上到下，可以使用justify-content和align-items改变水平和垂直对齐。</p>
<p><img src="https://cdn.jsdelivr.net/gh/funnypan/pics@master/20181022100130.png" alt="image"></p>
<h3 id="改变水平对齐方式">改变水平对齐方式</h3>
<p>justify-content有5个属性值：</p>
<ol>
<li>flex-start 左对齐</li>
<li>flex-end 右对齐</li>
<li>center 居中对齐</li>
<li>space-between 首尾对齐容器左右侧，中间间距相等</li>
<li>space-around 每个元素的间距相等</li>
</ol>
<p><img src="https://cdn.jsdelivr.net/gh/funnypan/pics@master/20181022100921.png" alt="image"></p>
<h3 id="改变垂直对齐方式">改变垂直对齐方式</h3>
<p>align-items有5个属性值：</p>
<ol>
<li>flex-start 顶部对齐</li>
<li>flex-end 底部对齐</li>
<li>center 居中对齐</li>
<li>baseline 基线对齐</li>
<li>stretch 拉伸以适应容器</li>
</ol>
<p><img src="https://cdn.jsdelivr.net/gh/funnypan/pics@master/images/20181022141409.png" alt="image"></p>
<p>关于align-items:baseline，可以看看codepen：<a href="https://codepen.io/flaviocopes/pen/oExoJR">https://codepen.io/flaviocopes/pen/oExoJR</a></p>
<h3 id="换行">换行</h3>
<p>默认情况下，flexbox容器中的项目保留在一行中，缩小它们以适合容器。</p>
<p>可以使用flex-wrap:wrap或者flex-wrap:wrap-reverse对容器中的元素进行换行处理。</p>
<p>一种简写方式：flex-flow:row wrap;即flex-direction:row &amp;&amp; flex-wrap:wrap</p>
<h3 id="适用于flexbox容器内每个元素的属性">适用于flexbox容器内每个元素的属性</h3>
<ol>
<li>order</li>
<li>align-self</li>
<li>flex-grow</li>
<li>flex-shrink</li>
<li>flex-basis</li>
<li>flex</li>
</ol>
<h4 id="order-改变元素的顺序如下图所示可以指定某个元素的order值以改变其位置默认值为0">order-改变元素的顺序，如下图所示，可以指定某个元素的order值，以改变其位置，默认值为0</h4>
<p><img src="https://cdn.jsdelivr.net/gh/funnypan/pics@master/images/20181022142507.png" alt="image"></p>
<h4 id="align-self-元素使用align-self覆盖容器的align-items对当前元素的对齐方式">align-self-元素使用align-self覆盖容器的align-items对当前元素的对齐方式</h4>
<p><img src="https://cdn.jsdelivr.net/gh/funnypan/pics@master/images/20181022142842.png" alt="image"></p>
<h4 id="flex-grow--flex-shrink-如有必要可以增加或缩小某个元素">flex-grow || flex-shrink 如有必要，可以增加或缩小某个元素</h4>
<p>flex-grow：默认值为0，当某个元素flex-grow为1，另一个为2，则为flex-grow：2的元素占用flex-grow:1的空间的2倍。</p>
<p>flex-shrink：默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。</p>
<p>比如：有这么一个容器，div&gt;.box1<em>3+.box2</em>2父容器定义宽度为500px，子元素定义宽度为120px，box1的flex-shrink为1，.box2的flex-shrink为2，那么子项相加之后即为 600 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化 通过收缩因子，所以加权综合可得 100<em>1+100</em>1+100<em>1+100</em>2+100*2=700px。</p>
<pre><code>于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少：
A 被移除溢出量：(100*1/700)*100，即约等于14px
B 被移除溢出量：(100*1/700)*100，即约等于14px
C 被移除溢出量：(100*1/700)*100，即约等于14px
D 被移除溢出量：(100*2/700)*100，即约等于28px
E 被移除溢出量：(100*2/700)*100，即约等于28px

最后A、B、C、D、E的实际宽度分别为：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px
</code></pre><h4 id="flex-basis-用于设置或检索弹性盒伸缩基准值默认值为auto其与width的区别可以参考这篇文章httpswwwjianshucomp17b1b445ecd4">flex-basis-用于设置或检索弹性盒伸缩基准值，默认值为auto，其与width的区别可以参考这篇文章：https://www.jianshu.com/p/17b1b445ecd4</h4>
<h4 id="flex有三个属性值">flex：有三个属性值</h4>
<ol>
<li>flex-grow</li>
<li>flex-shrink</li>
<li>flex-basis</li>
</ol>
<div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="nt">flex</span><span class="o">:</span> <span class="nt">0</span> <span class="nt">1</span> <span class="nt">auto</span>
<span class="nt">分别对应flex-grow</span><span class="err">、</span><span class="nt">flex-shrink</span><span class="err">、</span><span class="nt">flex-basis</span>
</code></pre></div><h2 id="结尾">结尾</h2>
<p>友情献上小游戏，通过游戏学习flexbox</p>
<p><a href="http://flexboxfroggy.com/#zh-cn">http://flexboxfroggy.com/#zh-cn</a></p>

</div>

        <footer class="post-footer clearfix">
    
        <p class="post-tags">
            <span>Tagged:</span>
            
            
                <a href="/tags/css/">css</a>
            
        </p>
    

    <div class="share">
        
            <a class="icon-twitter" href="https://twitter.com/share?text=Flexbox%e6%8c%87%e5%8d%97&url=https%3a%2f%2fblog.steps.info%2f2018%2f04%2f12%2fflexbox%25E6%258C%2587%25E5%258D%2597%2f"
                onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
                <i class="fa fa-twitter"></i>
                <span class="hidden">Twitter</span>
            </a>
        

        
            <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https%3a%2f%2fblog.steps.info%2f2018%2f04%2f12%2fflexbox%25E6%258C%2587%25E5%258D%2597%2f"
                onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
                <i class="fa fa-facebook"></i>
                <span class="hidden">Facebook</span>
            </a>
        

        
            <a class="icon-google-plus" href="https://plus.google.com/share?url=https%3a%2f%2fblog.steps.info%2f2018%2f04%2f12%2fflexbox%25E6%258C%2587%25E5%258D%2597%2f"
              onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
              <i class="fa fa-google-plus"></i>
                <span class="hidden">Google+</span>
            </a>
        
        
    </div>
</footer>

        
    <div class="comments">
        
    </div>

    </article>
</div>

            </div>
        </div>

        <footer class="footer">
            <div class="container">
                <div class="site-title-wrapper">
                    <h1 class="site-title">
                        <a title="Homepage" href="https://blog.steps.info/">Homepage</a>
                    </h1>
                    <a class="button-square button-jump-top js-jump-top" href="#">
                        <i class="fa fa-angle-up"></i>
                    </a>
                </div>

                <p class="footer-copyright">
                    <span>&copy; 2020 / Powered by <a href="https://gohugo.io/">Hugo</a></span>
                </p>
                <p class="footer-copyright">
                    <span><a href="https://github.com/roryg/ghostwriter">Ghostwriter theme</a> By <a href="http://jollygoodthemes.com">JollyGoodThemes</a></span>
                    <span>/ <a href="https://github.com/jbub/ghostwriter">Ported</a> to Hugo By <a href="https://github.com/jbub">jbub</a></span>
                </p>
            </div>
        </footer>

        <script src="https://blog.steps.info/js/jquery-1.11.3.min.js"></script>
        <script src="https://blog.steps.info/js/jquery.fitvids.js"></script>
        <script src="https://blog.steps.info/js/scripts.js"></script>
    </body>
</html>

